<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${constants.getSystemName()}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div id="initData" class="layui-row layui-col-space15">
    </div>
</div>

<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>

<script type="text/javascript"
        src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>

<script>
    layui.use(['layer', 'element'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        //动态班级数据
        $.ajax({
            url: Feng.ctxPath + '/indexData/init',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                var html = "";
                html += '<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">';
                html += '<div class="layui-card">';
                html += '<div class="layui-card-header">';
                html += '待审批<span class="layui-badge layui-bg-black pull-right">条</span>'
                html += '</div>';
                html += '<div class="layui-card-body">';
                html += '<p class="lay-big-font">' + res.data.pendingApprovals + '</p>';
                html += '<p>待审批记录<span class="pull-right"><i class="layui-icon layui-icon-note"></i></span></p>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">';
                html += '<div class="layui-card">';
                html += '<div class="layui-card-header">';
                html += '已审批<span class="layui-badge layui-bg-black pull-right">条</span>';
                html += '</div>';
                html += '<div class="layui-card-body">';
                html += '<p class="lay-big-font">' + res.data.approvaledRecords + '</p>';
                html += '<p>已审批记录<span class="pull-right"><i class="layui-icon layui-icon-notice"></i></span></p>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">';
                html += '<div class="layui-card">';
                html += '<div class="layui-card-header">';
                html += '已拒绝<span class="layui-badge layui-bg-black pull-right">条</span>';
                html += '</div>';
                html += '<div class="layui-card-body">';
                html += '<p class="lay-big-font">' + res.data.refuseRecords + '</p>';
                html += '<p>已拒绝记录<span class="pull-right"><i class="layui-icon layui-icon-diamond"></i></span></p>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">';
                html += '<div class="layui-card">';
                html += '<div class="layui-card-header">';
                html += '已销假<span class="layui-badge layui-bg-black pull-right">条</span>';
                html += '</div>';
                html += '<div class="layui-card-body">';
                html += '<p class="lay-big-font">' + res.data.approvalRecords + '</p>';
                html += '<p>已销假<span class="pull-right"><i class="layui-icon layui-icon-flag"></i></span></p>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="layui-col-xs12 layui-col-md8">';
                html += '<div class="layui-card" style="">';
                html += '<div class="layui-card-header">请假实时交易情况</div>';
                html += '<div class="layui-card-body">';
                html += '<div class="layui-row">';
                html += '<div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">';
                html += '<div class="numberInfoSubTitle">总计人数</div>';
                html += '<div class="numberInfoValue">' + res.data.totalPeoples + '</div>';
                html += '</div>';
                html += '<div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">';
                html += '<div class="numberInfoSubTitle">请假人数</div>';
                html += '<div class="numberInfoValue">' + res.data.leavePeoples + '</div>';
                html += '</div>';
                html += '<div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">';
                html += '<div class="numberInfoSubTitle">在位人数</div>';
                html += '<div class="numberInfoValue">' + res.data.incumbentsPeoples + '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div style="text-align: center;padding: 30px 0 10px 0;">';
                html += '<img src="http://www.pdsu.edu.cn/images/b2.jpg"';
                html += 'style="max-height: 437px; max-width: 100%;" alt="map">';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="layui-col-xs12 layui-col-md4">';
                html += '<div class="layui-card">';
                html += '<div class="layui-card-header">学生在位率</div>';
                html += '<div class="layui-card-body" style="height: 222px;overflow: hidden;">';
                html += '<div id="hjxl" style="width: 100%;height: 280px;margin-top: -20px;"></div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                $("#initData").html(html);

                var a1 = res.data.totalPeoples;
                var a2 = res.data.incumbentsPeoples;
                var result ='';
                if(a1===0||a2===0){
                    result =0
                }else{
                    result =a2/a1
                }
                alert(result)
                var s = Number(result.toFixed(2))*100;
                alert(s)
                var myCharts2 = echarts.init(document.getElementById('hjxl'), myEchartsTheme);
                var option2 = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    series: [
                        {
                            name: '学生在位率',
                            type: 'gauge',
                            detail: {formatter: '{value}%'},
                            data: [{value: Number(s), name: '在位率'}]
                        }
                    ]
                };
                myCharts2.setOption(option2);
                // 窗口大小改变事件
                window.onresize = function () {
                    myCharts2.resize();
                };
            },
            error: function (e) {
                layer.msg('连接超时，请稍后再试');
            }
        });
    });
</script>
</body>
</html>